<template>
  <el-dialog
    title="设备详情"
    :visible="openstatusdevicedetailsvisible"
    width="30%"
    @open="opentakeshuju"
    @close="close"
  >
    <div class="bigbox">
      <!-- 用 open 事件 打开这个弹出框的时候 至少要有5个接口被请求  -->
      <!-- 总计部分 -->
      <el-row type="flex" class="row-bg" justify="space-around">
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <div>销售量:{{intimeorder.data}}个</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple-light">
            <div>销售额:{{intimemoney}}万元</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <div>补货次:{{Replenishmenttimes.data}}次</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <div>维修次:{{repairCount.data}}次</div>
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- 商品销量（月） -->
    <!-- 头部 -->
    <div class="bodybox">
      <div class="headersss" style="margin:20px 0 12px 6px">商品销量（月）</div>
    </div>
    <!-- skuCollect -->
    <el-row class="myrow">
      <el-col class="mycol" :span="6" v-for="(item, index) in skuCollect" :key="index">
        <el-row>
          <el-col :span="14" class="ellipsis">{{ item.skuName }}</el-col>
          <el-col :span="10">：{{ item.count }}</el-col>
        </el-row>
      </el-col>
    </el-row>
  </el-dialog>
</template>

<script>
// 引入 dayjs 组件
import dayjs from 'dayjs'
// 引入接口
import {
  getintimeorder,
  getintimemoney,
  getReplenishmenttimes,
  getrepairCount,
  getskuCollect
} from '@/api/vm'
export default {
  name: 'EmperorKedeStatusdevicedetails',
  props: {
    openstatusdevicedetailsvisible: {
      type: Boolean,
      default: false
      // required: true
    }
  },
  data () {
    return {
      // 销售量和销售额的数据
      orderTime: {
        start: dayjs().startOf('month').format('YYYY-MM-DD HH:mm:ss'),
        end: dayjs().format('YYYY-MM-DD HH:mm:ss')
      },
      // 补货 维修 所有数据的 时间数据
      amountTime: {
        start: dayjs().startOf('month').format('YYYY-MM-DD'),
        end: dayjs().format('YYYY-MM-DD')
      },
      row: {},
      // 一定时间范围之内的订单总数
      intimeorder: 0,
      // 一定时间范围之内的收入
      intimemoney: 0,
      // 一定时间内的补货次数
      Replenishmenttimes: 0,
      // 一段时间内的维修次数
      repairCount: 0,
      // 商品销量
      skuCollect: []
    }
  },

  mounted () {
    console.log(this.orderTime)
    console.log(this.amountTime)
    // moment(createTime).format('YYYY-MM-DD HH:mm:ss')
  },

  methods: {
    // 依次获取数据
    // 销售总量
    async opentakeshuju () {
      // console.log(this.row)
      const res = await getintimeorder({
        ...this.orderTime,
        innerCode: this.row
      })
      // console.log(res)
      // 存起来
      this.intimeorder = res
      // console.log(this.intimeorder)
      // 销售总价格
      const res1 = await getintimemoney({
        ...this.orderTime,
        innerCode: this.row
      })
      console.log(res1.data)
      this.intimemoney = (+res1.data / 1000000).toFixed(2)
      // 售货机补货次数
      const res2 = await getReplenishmenttimes({
        innerCode: this.row,
        ...this.amountTime
      })
      // console.log(res2)
      this.Replenishmenttimes = res2
      // 售货机维修次数
      const res3 = await getrepairCount({
        innerCode: this.row,
        ...this.amountTime
      })
      // console.log(res3)
      this.repairCount = res3
      const res4 = await getskuCollect({
        innerCode: this.row,
        ...this.amountTime
      })
      // console.log(res4)
      this.skuCollect = res4.data
    },
    // 关闭前的回调
    close () {
      this.intimeorder = 0
      this.intimemoney = 0
      this.Replenishmenttimes = 0
      this.repairCount = 0
      this.skuCollect = []
      this.$emit('close', false)
    }
  }
}
</script>

<style lang="less" scoped>
.bodybox {
  display: flex;
  .bigbox {
    padding: 20px 20px 30px;
    color: #666;
    background-color: red;
  }
}
.myrow {
  background-color: red;
}
/deep/ .el-col-6 {
  height: 41px;
  display: inline-block;
  white-space: nowrap;
  // width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 41px;
}
/deep/ .el-row {
  /deep/ .el-col-14 {
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
</style>
